import usersView from '@/users.ejs';
import axios from "../api/index.js";
let baseURL = axios.defaults.baseURL;

async function getdata(res) {

    let { data } = await axios.get("/user/getdata");
    console.log(data.users);
    res.render(usersView({ users: data.users, baseURL }))
}

function addEvent(res) {

    //获取添加用户按钮
    //一。点击添加按钮，显示添加用户对话框

    let addUserBtn = document.querySelector(".adduer");

    //获取添加对话框
    let adduermodelEle = document.querySelector(".adduermodel");

    //获取遮罩层元素
    let maskEle = document.querySelector(".mask");

    addUserBtn.onclick = function () {
        adduermodelEle.style.display = "block";
        maskEle.style.display = "block";
    }

    // 二 点击 关闭的时候 关闭 对话框 
    let closebtnEle = document.querySelector(".closebtn");
    closebtnEle.onclick = function () {
        adduermodelEle.style.display = "none";
        maskEle.style.display = "none";
    }
    let imgFileEle = document.querySelector(".imgFile");
    let imgshowEle = document.querySelector(".imgshow")

    imgFileEle.onchange = function () {//选择图片的input发生改变时触发
        console.log('发生改变了');

        let imgObj = this.files[0];

        let filerader = new FileReader();
        filerader.readAsDataURL(imgObj);
        filerader.onload = function () {
            // console.log(filerader.result,"图片读取完毕");
            let myimg = new Image();
            myimg.src = filerader.result;
            myimg.style.width = "100px";
            myimg.style.height = "100px";
            imgshowEle.innerHTML = "";
            imgshowEle.appendChild(myimg);
        }

    }

    // 点击提交按钮的时候 发送ajax
    let submitBtn = document.querySelector(".btn");
    let usernameEle = document.querySelector(".username");
    let pwdEle = document.querySelector(".pwd");
    let repeatpwdEle = document.querySelector(".repeatpwd");
    submitBtn.onclick = async function () {
        // 发送ajax 测试 
        console.log("点击了提交按钮");
        let username = usernameEle.value;
        let pwd = pwdEle.value;
        let repeatpwd = repeatpwdEle.value;

        // 获取文件对象
        let imgfile = imgFileEle.files[0]; // 文件对象
        //  console.log("imgfile",imgfile);

        //表单校验
        if (username == "") {
            return alert("密码不能空")
        }
        if (pwd == "") {
            return alert("密码不能为空")
        }

        if (pwd !== repeatpwd) {
            return alert("两次输入密码不同")
        }
        if (typeof imgfile == 'undefined') {

            return alert("图像不能为空")
        }
        //借助FormData预定义类
        let form = new FormData();
        form.append("username", username);
        form.append("pwd", pwd);
        form.append("myimg", imgfile);

        let { data } = await axios.post("/user/adduser", form);
        if (data.status === 1) {
            console.log("添加用户成功", data);
            //重新渲染
            await getdata(res);
            await addEvent();
        }

    }

    // 点击按钮删除用户的功能；
    // 获取所有的删除按钮 
    let delBtns = document.querySelectorAll(".delBtn");
    // 循环绑定事件
    delBtns.forEach((item, key) => {
        item.onclick = async function () {
            console.log("点击了删除");
            let _id = this.getAttribute("myid")
            console.log(_id);
            let reslut = confirm("你确定要删除吗?");
            if(reslut){
              let {data} = await axios.delete("/user/deleuser",{params:{_id}})
              if(data.status==1){
                await getdata(res);  // 渲染视图 
                    await addEvent(res);  // 绑定事件
                }else{
                    console.log(data);
                }
            }
        }
    })

}

export default function (router) {

    router.route("/admin/users", async (req, res) => {
        console.log(res, "render");
        // res.render(usersView())
        await getdata(res)//带后台数据渲染
        await addEvent(res);//渲染后重新绑定事件

    })
}


